<template>
  <div class="search-article">
    <transition name="fade">
      <article class="main" v-if="loaded">
        <div class="left" >
          <!-- <accordion></accordion> -->
          <year class="select-year"></year>
        </div>
        <section class="right">
          <div class="result-infomation">
            <div class="label"></div>
            <span class="bold-font">
              {{amount}}
            </span>
            <span>
              Results for: All: 
            </span>
            <span class="bold-font">
              {{searchWord}}
            </span>
            <!-- <div class="sort">
              <h4>sort</h4>
              <select name="" id="" v-model="selectedSort" @change="sortChange">
                <option value="default">default</option>
                <option value="hotLevel">hotLevel</option>
                <option value="date">date</option>
                <option value="dateDesc">dateDesc</option>
              </select>
            </div> -->
          </div>
          <div class="content">
            <div class="items">
              <item v-for="item in articles" :key="item.id" :msg="item" class="item"></item>
            </div>
            <pagination class="pages" :amount="amount"></pagination>
          </div>          
        </section>
      </article>
      <div v-else class="search-loading">
        <loading></loading>
      </div>
    </transition>
  </div>
</template>

<script>
import request from "@/requests";

import Accordion from "@/components/Once/Search/Accordion/index";
import Year from "@/components/Once/Search/SideBar/SearchSideBar";
import Item from "@/components/ArticleItem/SearchItem";
import Pagination from '@/components/Once/Search/Pagination/SearchPagination.vue';
import Loading from '@/components/Loading/index';

export default {
  name: "SearchArticle",
  props: {

  },
  data() {
    return {
      articles: [],
      amount: 'Loading',
      loaded: false,
      dafaultArticles: [],
      selectedSort: 'default'
    };
  },
  computed: {
    searchWord() {
      return this.$route.query.str;
    }
  },
  mounted() {
    this.load();
  },
  watch: {
    '$route' (to, from) {
      if(to.query.str !== from.query.str ||
       to.query.page !== from.query.page ||
       to.query.start !== from.query.start ||
       to.query.end !== from.query.end ){
        this.load();
      }  
    }
  },
  methods: {
    init() {
      this.loaded = false;
      this.articles = [];
      this.dafaultArticles = [];
    },
    load() {
      this.init();
      const str = this.$route.query.str;
      const params = {allField: str, limit: 10};
      if (this.$route.query.page) {
        params.startPage = this.$route.query.page - 1;
      }
      if (this.$route.query.start) {
        params.startYear = this.$route.query.start;
      }
      if (this.$route.query.end) {
        params.endYear = this.$route.query.end;
      }
      request({
        method: 'get',
        url: `/article/search`,
        params
      }).then((res) => {
        this.articles = res.data.data.info;
        this.dafaultArticles = [...this.articles];
        this.amount = res.data.data.count;
        this.sortChange();
        document.title = this.$route.meta.title + ' | ' + str;
        setTimeout(() => {
          this.loaded = true;
        }, 10);
      }).catch((err) => {
        console.log(err);
      });
    },
    sortChange(e) {
      const sorts = ['default', 'hotLevel', 'date', 'dateDesc'];
      console.log(this.articles);
      if (sorts.indexOf(this.selectedSort) == 0) {
        this.articles = [...this.dafaultArticles];
      }
      else if (sorts.indexOf(this.selectedSort) == 1) {
        // console.log(this.articles);
        this.articles.sort((a, b) => {
          const hotLevelA = a.hot_level;
          const hotLevelB = b.hot_level;
          if (hotLevelA > hotLevelB) {
            return -1;
          }
          if (hotLevelA < hotLevelB) {
            return 1;
          }
          return 0;
        })
      }
      else if (sorts.indexOf(this.selectedSort) == 2) {
        this.articles.sort((a, b) => {
          const dateA = a.date;
          const dateB = b.date;
          if (dateA > dateB) {
            return -1;
          }
          if (dateA < dateB) {
            return 1;
          }
          return 0;
        })
      }
      else if (sorts.indexOf(this.selectedSort) == 3) {
        this.articles.sort((a, b) => {
          const dateA = a.date;
          const dateB = b.date;
          if (dateA > dateB) {
            return 1;
          }
          if (dateA < dateB) {
            return -1;
          }
          return 0;
        })
      }
    }
  },
  components: {
    Accordion,
    Year,
    Item,
    Pagination,
    Loading,
  },
};
</script>

<style scoped lang="scss">
.search-article {
  article {
    display: flex;
    // align-items: flex-start;
    flex-wrap: wrap;
    width: 1260px;
    margin: 20px auto;
    transition: ease-in-out .25s;
    
    // @media screen and (max-width: 1280px){
    //   width: 1000px;
    // }

    @media screen and (max-width: 1280px){
      margin-left: 2px;
      margin-right: 2px;
      width: auto;
    }
    
    .left {
      display: flex;
      flex-direction: column;
      // width: 265px;
      // padding: 30px 15px;
      @media screen and (max-width: 1015px){
        width: 94%;
        margin: 0 auto;
      }

      .select-year {
        position: sticky;
        top: 130px;
        margin-top: 30px;
      }
    }

    section {
      padding: 30px 15px;
      @media screen and (max-width: 500px){
        padding: 30px 5px;
      }
      min-width: 670px;
      @media screen and (max-width: 720px){
        min-width: 300px;
      }
      flex: 1;
      .result-infomation {
        display: flex;
        align-items: center;

        .label {
          border-left: 8px solid #000;
          padding-left: 6px;
          border-color: #ebc34a;
          display: inline-block;
          height: 18px;
        }

        span {
          font-style: italic;
          padding-left: 10px;
          font-size: 18px;
          font-family: Merriweather Sans,sans-serif;

          &.bold-font {
            font-weight: 600;
          }
        }

        .sort {
          display: flex;
          align-items: center;
          flex: 1;
          justify-content: flex-end;
          color: darkgreen;

          >h4 {
            margin-right: 10px;
          }
        }
      }

      .content {

        .items {
          margin-top: 30px;

          .item {
            margin-bottom: 20px;
          }
        }

        .pages {
          display: flex;
          justify-content: center;
        }
      }



    }
  }
  .search-loading {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
  }
}
</style>
